<template>
  <div
    :class="{
      'text-center': computedState.position,
    }"
  >
    <MaterialsHeader
      :title="computedState.title"
      :desc="computedState.desc"
      :serialNum="serialNum"
      :titleSize="computedState.titleSize"
      :descSize="computedState.descSize"
      :titleWeight="computedState.titleWeight"
      :descWeight="computedState.descWeight"
      :titleItalic="computedState.titleItalic"
      :descItalic="computedState.descItalic"
      :titleColor="computedState.titleColor"
      :descColor="computedState.descColor"
    />
    <el-input placeholder="请输入题目标题" v-model="text" :type="!computedState.type ? 'text' : 'textarea'" :rows="4" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import MaterialsHeader from '../../Common/MaterialsHeader.vue';
import { getTextStatus, getCurrentStatus, getStringStatusByCurrentStatus } from '@/utils';

const props = defineProps({
  status: {
    type: Object,
    required: true,
  },
  serialNum: {
    type: Number,
    required: true,
  },
});

const computedState = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  type: getCurrentStatus(props.status.type),
  position: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}));

const text = ref('');
</script>

<style scoped lang=""></style>
